<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			html,
			body {
				background-color: #efeff4;
			}
			.head {
				background-color: #65C2EB;
			}
			.body {
				padding: 5px;
			}
			#photo {
				height: 85px;
				width: 85px;
				border-radius: 5px;
				display: block;
				margin: 7px auto;
				border: 2px solid #fff;
			}
			.signature {
				height: 75px;
				background-color: #fff;
				border: 1px solid #ccc;
				box-shadow: 1px 1px 2px #ccc, -1px -1px 2px #ddd;
			}
			.signature p {
				font-size: 15px;
				line-height: 18px;
				color: #bbb;
				margin-left: 10%;
				max-width: 90%;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.menu {
				background-color: #fff;
				text-align: center;
				border: 1px solid #ccc;
				border-top: none;
				box-shadow: 1px 1px 2px #ccc, -1px -1px 2px #ddd;
			}
			.mui-grid-view.mui-grid-9 {
				background-color: #fff;
			}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				padding: 0;
				border: 1px solid #ddd;
				margin: 5px;
				border-radius: 10px;
			}
			.mui-table-view.mui-grid-view .mui-table-view-cell {
				font-size: 16px;
				border-color: rgba(0,122,255,0.6);
				color: rgba(0,122,255,0.8);
			}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 14px;
				color: rgba(0,122,255,0.9);
			}
			.mui-icon {
				line-height: 10px;
			}
			.mui-table-view:after {
				height: 0;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="head">
				<br />
				<h4 class="mui-text-center" style="color: #fff;">龚训瑶</h4>
				<img id="photo" src="../img/usr_unlogin.jpg" />
				<hr />
				<div class="edit-panel" style="position: absolute;top: 10px; right: 5px;">
					<button class="mui-btn mui-btn-danger">编辑</button>
				</div>
			</div>
			<div class="body">
				<div class="signature">
					<h4 style="color: #777;">&nbsp;个人签名</h4>
					<p>秀出你的个人签名，让BOSS发现你！秀出你的个人签名，让BOSS发现你！秀出你的个人签名，让BOSS发现你！秀出你的个人签名，让BOSS发现你！</p>
				</div>
				<h4 style="color: #777; margin-top: 10px;">&nbsp;我的应用</h4>
				<nav class="menu">
					<ul class="mui-table-view mui-grid-view mui-grid-9" style="margin-bottom: 20px;">
						<br />
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2">
							<a href="apply.html">
								<span class="mui-icon mui-icon-paperplane"></span>
								<div class="mui-media-body">已申请</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2">
							<a href="seek-by.html">
								<span class="mui-icon mui-icon-list"></span>
								<div class="mui-media-body">被浏览</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2">
							<a href="messages.html">
								<span class="mui-icon mui-icon-email"></span>
								<div class="mui-media-body">我的消息</div>
							</a>
						</li>
						<br />
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2">
							<a href="schedule.html">
								<span class="mui-icon mui-icon-paperclip"></span>
								<div class="mui-media-body">日程安排</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2">
							<a href="job-collection.html">
								<span class="mui-icon mui-icon-star"></span>
								<div class="mui-media-body">我的收藏</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2">
							<a href="subscibe.html">
								<span class="mui-icon mui-icon-search"></span>
								<div class="mui-media-body">订阅管理</div>
							</a>
						</li>
						<br />
						<br />
					</ul>
				</nav>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/commons.js"></script>
		<script type="text/javascript">
			mui.init();
			
			mui.plusReady(function() {
				//初始化模板
				getTemplate('person-center-template', 'person-center-template.html');
			});
			/*菜单按钮*/
			mui('.mui-table-view').on('tap', 'a', function() {
				var title = this.innerText.trim();
				//获得共用父模板
				var template = getTemplate("person-center-template");
				var headerWebview = template.header;
				//获得共用子webview
				var contentWebview = template.content;
				//通知模板修改标题，并显示隐藏右上角图标；
				mui.fire(headerWebview, 'updateHeader', {
					title: title,
					showMenu: false
				});
				var reload = true;
				if (!template.loaded) {
					if (contentWebview.getURL() != this.href) {
						contentWebview.loadURL(this.href);
					} else {
						reload = false;
					}
				} else {
					reload = false;
				}
				(!reload) && contentWebview.show();
				headerWebview.show('slide-in-right', 150);
			});
			
			document.querySelector(".signature").addEventListener('tap', function() {
				mui.openWindow({
					url: 'edit-signature.html',
					show: {
						aniShow: 'slide-in-right', 
						duration: 200
					},
					waiting: {
						autoShow: false
					}
				});
			});
		</script>
	</body>

</html>